<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="top_wrap">
	<div id="top">
		<div id="top_content">
			<a href="#"><i></i>首页</a>
			<a href="#"><i></i>商城</a>
			<a href="#">我的订单</a>
			<a href="#">关于我们</a>
		</div>
	</div>
</div>
<!--关于我们-->
<div id="about_us">
	<div id="about_us_list">
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
			</ul>
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
			</ul>
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
			</ul>
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
			</ul>
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
				<li><a href="#">规则众议院</a></li>
			</ul>
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
			</ul>
	</div>
	<div class="line">
			<span>©2019 Mogujie.com 杭州卷瓜网络有限公司</span>
	</div>
	<p>
		<span>营业执照：</span>
		<span>913301065526808764</span>
		<span>网络文化经营许可证：</span>
		<span>浙网文（2016）0349-219号</span>
		<span>增值电信业务经营许可证：</span>
		<span>浙B2-20110349</span>
		<span>安全责任书</span>
		<span>浙公网安备 33010602002329号</span>
	</p>
	<p>
		<span>互联网药品信息服务资格证书编号：（浙)-经营性-2018-0002</span>
		<span>浙网食A33010003</span>
		<span>出版物网络交易平台服务经营备案证</span>
		<span>（浙）网械平台备字[2018]第00006号</span>
	</p>
</div>

<header>
	<div>
		<a id="logo">
			<img src="../img/logo.png" alt="">
		</a>
		<a href="#" id="cate_btn"><i></i>目录</a>
	</div>
	
	<div>
		<input type="text" placeholder="阔腿裤">
		<input type="button">
	</div>
	<div>
		<a href="#"><img src="../img/message.png">消息</a>
		<a href="#"><img src="../img/save.png">收藏</a>
		<a href="http://localhost/mogujie/html/carList.html" target="_blank" id="red_dot"><img src="../img/car.png" id="red_dot">购物车<span></span></a>
		<a href="#" id="download"><img src="../img/code.png">下载APP</a>
		<section id="app_code">
			<img src="../img/app_code.png">
		</section>
	</div>
	<div>
		<a href="http://localhost/mogujie/html/login.html"><img src="../img/mogu_min.png">登陆</a>
	</div>
</header>
<div id="top1">
	<p><input type="checkbox" class="allCheck">全选<span>商品信息</span><span>单价(元)</span><span>数量</span><span>小计(元)</span><span>操作</span></p>
</div>
<div class="carList" id="shopCar">
	<!-- <section>
		<p>
			<span><input type="checkbox"></span>
			<span><img src="#"></span>
			<span>标题标题标题标题标题标题标题标题</span>
			<span>79.00</span>
			<span><a href="#">-</a></span>
			<span><input type="text" value="1"></span>
			<span><a href="#">+</a></span>
			<span>158.00</span>
			<span><a href="#">删除</a></span>
		</p>
	</section> -->
</div>
<div id="total">
	<p><input type="checkbox" name="" class="allCheck"><span>全选</span><span>删除</span></p>
	<p><span>共有<i id="totalNum">0</i>件商品</span>,总计：<b id="totalMoney">￥0.00</b><input id="payment" class="payment" type="button" value="去付款 >"></p>
</div>
<script src="../js/promise.js"></script>
<script>
	var arr=JSON.parse(localStorage.getItem('result'))||[];

	var total=document.getElementById('tatal');
	var shopCar=document.getElementById('shopCar');

	renderList();
	function renderList(){
		if(arr.length){
			for(var i=0;i<arr.length;i++){
				var calNum=parseInt(arr[i].price)*parseInt(arr[i].num);
				var oSec=document.createElement('section');
				oSec.className='secList'
				oSec.innerHTML=`
					<p>
						<span><input type="checkbox" class="oCheck"></span>
						<span><img src=${arr[i].pic}></span>
						<span><i>${arr[i].name}</i></span>
						<span  id="price">${arr[i].price}</span>
						<span><a href="javascript:;" id="sub_btn">-</a></span>
						<span><input id="num_count" type="text" value="${arr[i].num}"></span>
						<span><a href="javascript:;" id="add_btn">+</a></span>
						<span id="cal">${calNum}</span>
						<span><a href="#" onclick="delList(this)" class="delBtn">删除</a></span>
					</p>

				`
				shopCar.appendChild(oSec);
			}
		}
		
	}
	// var aSec=document.querySelectorAll('#shopCar section');
	// var addBtn=aSec[0].querySelector('.secList span:nth-of-type(7) a');
	// var numCount=aSec[0].querySelector('.secList span:nth-of-type(6) input');
	// var subBtn=aSec[0].querySelector('.secList span:nth-of-type(5) a');
	// var cal=aSec[0].querySelector('.secList span:nth-of-type(8)');
	// var price=aSec[0].querySelector('.secList span:nth-of-type(4)');
	// console.log(addBtn)
	// console.log(numCount)
	// console.log(subBtn)
	// console.log(cal)
	// console.log(price)
	
	//商品数量加减
	// var addBtn=document.getElementById('add_btn');
	// var numCount=document.getElementById('num_count');
	// var subBtn=document.getElementById('sub_btn');
	// var cal=document.getElementById('cal');
	// var price=document.getElementById('price');

		// subBtn.onclick=function(){
		// 		numCount.value=parseInt(numCount.value)-1;
		// }
		// addBtn.onclick=function(){
		// 		console.log(23)
		// 		numCount.value=parseInt(numCount.value)+1;	
		// 		subtotal()
		// }
	var totalNum=document.getElementById('totalNum');
	var totalMoney=document.getElementById('totalMoney');
	var payment=document.getElementById('payment');

	var aSec=document.querySelectorAll('#shopCar section');
	var aNum=document.querySelectorAll('.secList span:nth-of-type(6) input');
	var aMoney=document.querySelectorAll('.secList span:nth-of-type(8)');
	
	//初始化
	payment.className='';
	// console.log(aSec);
	for(var i=0;i<aSec.length;i++){
		fn(aSec[i]);
	}
	function fn(oSec){
		var aSec=document.querySelectorAll('#shopCar section');
		var addBtn=oSec.querySelector('.secList span:nth-of-type(7) a');
		var numCount=oSec.querySelector('.secList span:nth-of-type(6) input');
		var subBtn=oSec.querySelector('.secList span:nth-of-type(5) a');
		var cal=oSec.querySelector('.secList span:nth-of-type(8)');
		var price=oSec.querySelector('.secList span:nth-of-type(4)');

		

		var pri=parseInt(price.innerHTML);
		var num=parseInt(numCount.value);
		// console.log(pri,num)
		// console.log(cal.innerHTML);
		subBtn.onclick=function(){
			num--;
			if(num<1){num=1}
			// console.log(pri);
			numCount.value=num;
			cal.innerHTML=pri*num;
			fnTot();
		}
		addBtn.onclick=function(){
			num++;
			// console.log(pri)
			// console.log(num)
			numCount.value=num;
			cal.innerHTML=pri*num;
			fnTot();
		}

	}
	//小计
	function subtotal(){
		cal.innerHTML=parseInt(price.innerHTML)*parseInt(numCount.value);
	}
	
	//删除功能
	function delList(obj){
		
		var delBtn=document.querySelectorAll('.delBtn');
		for(var i=0;i<delBtn.length;i++){
			delBtn[i].index=i;
		}
		// console.log(arr);
		console.log(obj.index)
		arr.splice(obj.index,1);
		// console.log(arr);
		localStorage.setItem('result',JSON.stringify(arr));
		location.reload();
		renderList();
		// localStorage.removeItem('result');
		// location.reload();
		// obj.parentNode.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode.parentNode);
	}
	/*--------------全选------------------*/
	var aInp=document.querySelectorAll('.oCheck');

	var allCheck=document.querySelectorAll('.allCheck');

	// for(var i=0;i<aInp.length;i++){
	// 	if(!aInp[i])
	// }
	for(var i=0;i<aInp.length;i++){
		aInp[i].index=i;
		aInp[i].isChecked=true;
		// aInp[i].onclick=function(){

		// }

		aInp[i].onclick=function(){
			if(this.checked){
				aInp[this.index].isChecked=false;
				payment.className='payment';
				fnTot();
			}else{
				aInp[this.index].isChecked=true;
				// payment.className='';
				fnTot();
				exitChecked()
			}
			
			var n=true;
			//如果input不是选中状态，n为false
			for(var j=0;j<aInp.length;j++){
				if(!aInp[j].checked){
					n=false;
				}
			}
			//改变全选状态
			for(var j=0;j<allCheck.length;j++){
				allCheck[j].checked=n;
			}
		}
			
		// }
		//选中计算数量价格
	}

	function exitChecked(){
		for(var i=0;i<aInp.length;i++){
			//如果有一个是选中状态，付款按钮激活
			if(aInp[i].checked==true){
				console.log(aInp[i].isChecked)
				payment.className='payment';
				break;	
			}else{
				payment.className='';
			}
			// if(i==aInp.length){
			// 	payment.className='';
			// }
		}
	}
	/*-----------------计算商品的总数量和总价格------------------*/
	fnTot();
	function fnTot(){
		var initNum=0;//数量初始化
		var initMoney=0;//总价初始化
		// console.log(aInp)
		
		for(var i=0;i<aSec.length;i++){
			if(aInp[i].checked){
				// console.log(11)
				initNum+=parseInt(aNum[i].value);
				initMoney+=parseInt(aMoney[i].innerHTML);
			}
			
		}
		totalNum.innerHTML=initNum;
		totalMoney.innerHTML="￥"+initMoney;
	}
	//全选
	for(var i=0;i<allCheck.length;i++){
		allCheck[i].index=i;
		// allCheck[i].onOff=true;
		allCheck[i].onclick=function(){
			for(var j=0;j<aInp.length;j++){
				if(this.checked){
					payment.className='payment';
					aInp[j].checked=true;
					fnTot();
					// onOff=false;
					for(var k=0;k<allCheck.length;k++){
						allCheck[k].checked=true;
					}
				}else{
					payment.className='';
					aInp[j].checked=false;
					fnTot();
					for(var k=0;k<allCheck.length;k++){
						allCheck[k].checked=false;
					}
					// onOff=true;
				}
			}
		}
		
	}
	// console.log(aInp.length);

	/*--------------判断购物车中是否有内容，有则加红点------------------*/

	var redDot=document.querySelector('#red_dot span');
	if(JSON.parse(localStorage.getItem('result')).length){
		redDot.className='redDot'
	}

</script>
</body>
</html>